<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
	type?: string;
	shape?: string;
	outline?: boolean;
	size?: 'small' | 'normal' | 'large';
	customStyle?: any;
}

defineOptions({
	externalClasses: ['custom-class']
});

const props = withDefaults(defineProps<Props>(), {
	type: 'default',
	shape: 'square',
	outline: false
});

const classNames = computed(() => {
	const list = ['x-button', `x-button-${props.type}`, `x-button-${props.shape}`];
	if (props.outline) {
		list.push('x-button-outline');
	}
	if (props.size) {
		list.push(`x-button-${props.size}`);
	}
	return list;
});

const style = computed(() => {
	return props.customStyle;
});
</script>

<template>
	<view :class="classNames" class="custom-class" :style="style">
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.x-button {
	display: inline-block;
	padding: 14rpx 36rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	text-align: center;
	box-sizing: border-box;
	white-space: nowrap;

	&-primary {
		background-color: #0024aa;
		color: #fff;
	}

	&-danger {
		background-color: #fd0237;
		color: #fff;
	}

	&-round {
		border-radius: 100rpx;
	}

	&-outline {
		border: 1px solid #0024aa;
		background-color: #fff;
		color: #0024aa;
	}

	&-large {
		font-size: 32rpx;
		padding: 28rpx 36rpx;
		border-radius: 20rpx;
	}
}
</style>
